<template>
    <div class="wrapper">
        <!-- header部分 -->
        <header>
            <p>新增地址</p>
        </header>
        <!-- 地址列表部分 -->
        <!-- 表单部分 -->
        <ul class="form-box">
            <li>
                <div class="title">
                    联系人：
                </div>
                <div class="content">
                    <input type="text" v-model="contactName" placeholder="联系人姓名">
                </div>
            </li>
            <li>
                <div class="title">
                    性别：
                </div>
                <div class="content" style="font-size: 3vw;">
                    <input type="radio" @click="Sex(1)" style="width:6vw;height:3.2vw;">男
                    <input type="radio" @click="Sex(2)" style="width:6vw;height:3.2vw;">女
                </div>
            </li>
            <li>
                <div class="title">
                    电话：
                </div>
                <div class="content">
                    <input type="tel" v-model="contactTel" placeholder="电话">
                </div>
            </li>
            <li>
                <div class="title">
                    收货地址：
                </div>
                <div class="content">
                    <input type="text" v-model="address" placeholder="收货地址">
                </div>
            </li>
        </ul>
        <div class="button-add">
            <button @click="addUserAddress">保存</button>
        </div>
        <!-- 底部菜单部分 -->
        <div class="footer">
            <div @click="handleClick(1)"><i class="fa fa-home"></i>
                <p>首页</p></div>
            <div><i class="fa fa-compass"></i>
                <p>发现</p></div>
            <div @click="handleClick(2)"><i class="fa fa-file-text"></i>
                <p>订单</p></div>
            <div @click="handleClick(3)"><i class="fa fa-user-o"></i>
                <p>我的</p></div>
        </div>
    </div>
</template>

<script setup>
import {inject, onMounted, ref} from "vue";
import router from "../router/index.js";

const $http = inject("$axios");
const $queryStr = inject("$qs")
const orderTypeId = ref("");
const userId = ref("1234567222");
const userPwd = ref("");
const userNewPwd = ref("");
const resInf = ref("");
const businessId = ref()
const Businesses = ref([])
const Businesses2 = ref([])
const deliveryAddressArr = ref([])
const daId=ref("")
const address=ref("1")
const contactTel=ref("1")
const contactName=ref("1")
const contactSex=ref("1")
onMounted(
    () => {
        $http.post('/api/elm_api/DeliveryAddressController/listAllDeliveryAddressByUserId',
            $queryStr.stringify({
                userId: userId.value
            }))
            .then(response => {
                deliveryAddressArr.value = response.data;
            })
    }
)

function Sex(num){
    if(num===1)contactSex.value=1
    if(num===2)contactSex.value=2
}
function addUserAddress(){
    $http.post('/api/elm_api/DeliveryAddressController/saveDeliveryAddress',
        $queryStr.stringify({
            contactName:contactName.value,
            contactSex:contactSex.value,
            contactTel:contactTel.value,
            address:address.value,
            userId:userId.value
        }))
        .then(response=>{
            if(response.data>0){
                /*let deliveryAddress = this.$getLocalStorage(this.user.userId);
                if(deliveryAddress!=null&&deliveryAddress.daId==daId){
                    this.$removeLocalStorage(this.user.userId);
                }
                this.listDeliveryAddressByUserId();*/
                alert('添加地址成功！');
                router.push('/Address')
            }else{
                alert('添加地址失败！');
                router.push('/ChangeAddress')
            }
        })

}
function Remove(Da){
    if(!confirm("确认要删除该地址吗"))
        return;
    $http.post('/api/elm_api/DeliveryAddressController/removeDeliveryAddress',
        $queryStr.stringify({
            daId:Da
        }))
        .then(response=>{
            if(response.data>0){
                /*let deliveryAddress = this.$getLocalStorage(this.user.userId);
                if(deliveryAddress!=null&&deliveryAddress.daId==daId){
                    this.$removeLocalStorage(this.user.userId);
                }
                this.listDeliveryAddressByUserId();*/
                alert('删除地址成功！');
            }else{
                alert('删除地址失败！');
            }
        })
    $http.post('/api/elm_api/DeliveryAddressController/listAllDeliveryAddressByUserId',
        $queryStr.stringify({
            userId: userId.value
        }))
        .then(response => {
            deliveryAddressArr.value = response.data;
        })
    handleClick(9)
}

function handleClick(Num){
    //路由负责跳转
    if (Num===1)router.push('/Index')
    if(Num===2)router.push('/OrderList')
    if(Num===3)router.push('/Login')
    if(Num===4)router.push('/BusinessList')
    if(Num===4)router.push('/BusinessNew')
    if(Num===9)router.push('/Address')
    if(Num===9)router.push('/Address')
}
</script>

<style scoped lang="css">
@import "../../src/css/global.css";
@import "../../src/css/font-awesome/css/font-awesome.min.css";
@import "../../src/css/Address.css";
@import "../../src/css/normalize.css";
@import "../../src/css/businessList.css";
@import "../../src/css/Footer.css";
.wrapper {
    width: 100%;
    height: 100%;
}
/*************** header ***************/
.wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    font-size: 4.8vw;
    position: fixed;
    left: 0;
    top: 0;
    /*保证在最上层*/
    z-index: 1000;
}
/*************** （表单信息） ***************/
.wrapper .form-box {
    width: 100%;
    margin-top: 12vw;
}
.wrapper .form-box li {
    box-sizing: border-box;
    padding: 4vw 3vw 0vw 3vw;
    display: flex;
}
.wrapper .form-box li .title {
    flex: 0 0 18vw;
    font-size: 3vw;
    font-weight: 700;
    color: #666;
}
.wrapper .form-box li .content {
    flex: 1;
    display: flex;
    align-items: center;
}
.wrapper .form-box li .content input {
    border: none;
    outline: none;
    width: 100%;
    height: 4vw;
    font-size: 3vw;
}
.wrapper .button-add {
    box-sizing: border-box;
    padding: 4vw 3vw 0vw 3vw;
}
.wrapper .button-add button {
    width: 100%;
    height: 10vw;
    font-size: 3.8vw;
    font-weight: 700;
    border: none;
    outline: none;
    border-radius: 4px;
    color: #fff;
    background-color: #38CA73;
}
</style>